<template>
  <el-form
    ref="loginForm"
    :rules="loginRules"
    :model="loginForm"
    class="login-form"
    status-icon
    label-width="0"
  >
    <el-form-item prop="username">
      <div class="logininput">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yonghu"></use>
        </svg>
        <el-input
          v-model="loginForm.username"
          size="small"
          auto-complete="off"
          placeholder="请输入用户名"
          @keyup.enter.native="handleLogin"
        >
        </el-input>
      </div>
    </el-form-item>
    <el-form-item prop="password">
      <div class="logininput">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mimacode"></use>
        </svg>
        <el-input
          :type="passwordType"
          v-model="loginForm.password"
          size="small"
          auto-complete="off"
          placeholder="请输入密码"
          @keyup.enter.native="handleLogin"
        >
        </el-input>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        class="loginbtn sybtn"
        @click.native.prevent="handleLogin" :disabled="!(hdInfo.hdZt=='进行中')"
      >登录<span v-if="!(hdInfo.hdZt=='进行中')">（测评{{hdInfo.hdZt}}）</span>
      </el-button>
    </el-form-item>
<!--    <cePing ref="cePing" @next="reloadHd"/>-->
    <cePingIndex ref="cePingIndex" @next="reloadHd" />
  </el-form>
</template>

<script>
import {wdXuanPiao} from "@/api/ceping/cepinghdglxpxxb";
// import cePing from '@/page/ceping/leaders/cpIndexsm';
import cePingIndex from '@/page/ceping/leaders/cpIndex-index';

export default {
  name: "Userlogin",
  components: {
    // cePing,
    cePingIndex
  },
  data() {
    return {
      socialForm: {
        code: "",
        state: "",
      },
      loginForm: {
        username: "",
        password: "",
        code: "",
        randomStr: "blockPuzzle",
      },
      checked: false,
      code: {
        src: undefined,
        len: 4,
      },
      loginRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"},
        ],
      },
      passwordType: "password",
    };
  },
  props: {
    hdInfo: {
      default: {},
      type: Object
    }
  },
  methods: {
    showPassword() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //this.$refs.verify.show();//验证码登录（暂时关闭）
          let xpCode = this.loginForm.username + "";
          this.$store.dispatch("LoginByUsername", this.loginForm).then(res => {
            wdXuanPiao(this.hdInfo.id).then(res => {
              if (res.data.data.length > 0) {
                this.loginForm = {
                  username: "",
                  password: "",
                  code: "",
                  randomStr: "blockPuzzle",
                }
                 this.$refs.cePingIndex.initHd(res.data.data,this.hdInfo.id);
                //this.$refs.cePing.initHd(res.data.data,this.hdInfo.id);
              } else {
                this.$notify.closeAll();
                this.$notify.error('您在本次测评中没有选票信息');
                this.$store.dispatch("LogOut").then(res => {
                })
              }
            })
          });
        }
      });
    },
    reloadHd() {
      this.$store.dispatch("LogOut").then(res => {
      })
    },
  },
};
</script>

<style scoped>
.el-button--small {
  font-size: 30px !important;
}
</style>
